﻿<html>
<head>
	<title>Music Hunter</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Flora (Default)">
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery-ui-core.js" type="text/javascript"></script>
	<script src="js/jquery-ui-tabs.js" type="text/javascript"></script>
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$('#container > ul').tabs();
			$('.#container > ul').bind('tabsselect', function(event, ui) {
				switch (ui.panel.id){
					case "playlist":
						showPlaylist();
						break;
				};
			});
		});

		function showPlaylist(){
			var songs;
			if (!$.cookie("playlist_hunter")){
				songs = [];
			}else{
				songs = ($.cookie("playlist_hunter")).split("|");
			}
			if (songs.length>0){
				$("#playListItems").empty();
				$.each(songs, function(i,item){
					var info = item.split("@");
					$("#playListItems").append("<div id='playListItem-" + i + "'><a href='javascript:void(0);' class='playbtn'><img src='images/play.png' border='0' /></a><span class='title-song'>" + info[1] + "</span></div>");
					$("#playListItem-"+i+" > .playbtn").click(function(){
						y.SendMessageToMainPluginWindow("PLAY|" + info[0] + "|" + "playlist" + "|" + i + "|" + info[1] + "|" + info[2]);
					});
				});
			}else{
				$("#playListItems").append("NOTHING!");
			}
		};

		function onSearchClick(){

			strSearch = $("#txtSearch").val();

			strSearch = UnicodeGet(strSearch);

			while (strSearch.length > 0 && strSearch.charAt(0) <= ' ')
			{
				strSearch = strSearch.substr(1);
			}

			while ((i=strSearch.length) > 0 && strSearch.charAt(i - 1) <= ' ')
			{
				strSearch = strSearch.substr(0, i - 1);
			}

			keyword = xoadau(strSearch);
			$("#resultSearch").empty();
			$("#resultSearch").append("<img src='images/loading.gif' border='0' />'");
			$.getJSON("fetch.php?mode=search&keyword=" + keyword + "&jsoncallback=?",
				function(data){
					$("#resultSearch").empty();
					$.each(data, function(i,item){
						$("#resultSearch").append("<div id='song-" + i + "'><a href='javascript:void(0);' class='playbtn'><img src='images/play.png' border='0' /></a><a href='javascript:void(0);' class='addbtn'><img src='images/add.png' border='0' /></a><span class='title-song'>" + item.title + " " + item.artist + "</span></div>");
						$("#song-"+i+" > .playbtn").click(function(){
							y.SendMessageToMainPluginWindow("PLAY|" + item.id + "|" + "song" + "|" + i + "|" + item.title + "|" + item.duration);
						});
						$("#song-"+i).mouseover(function(){
							$(this).css('background-color','#99ffdd');
						});
						$("#song-"+i+" > .addbtn").click(function(){
							addPlaylist(item.id + "@" + item.title + "@" + item.duration);
						});
					});
				});
		};

		function addPlaylist(songInfo){
			// how many songs do we want to remember?
			var count = 15; // # of pages to remember
			var delim = "|"; // delimiter for songs in cookie
			var isFound = 0;
			var info = songInfo.split("@");

			// get the previous cookie (if any), split it into an array
			var songs;
			if (!$.cookie("playlist_hunter")){
				songs = [];
			}else{
				songs = ($.cookie("playlist_hunter")).split(delim);
				if (("|" + $.cookie("playlist_hunter")).indexOf("|" + info[0] + "@") >= 0){
					isFound = 1;
				}
			}

			if (isFound == 0){
				// add the current song
				songs.push(songInfo);
				// remove the oldest location(s), down to our limit
				if (songs.length > count) {
					songs = songs.slice(songs.length - count);
				}
				// set the new cookie
				$.cookie("playlist_hunter", songs.join(delim), { expires: 365});
				y.SendMessageToMainPluginWindow("PLAYLIST|" + info[0] + "|" + info[1] + "|" + info[2]);
				alert("Bài hát [" + info[1] + "] đã được thêm vào danh sách!");
			}else{
				alert("Bài hát [" + info[1] + "] đã có trong danh sách!");
			}
		};

		$(document).ready(function() {
			y = window.external;
			y.LocalReady();
		});

		function entsub() {
			if (window.event && window.event.keyCode == 13)
				onSearchClick();
			else
				return true;
		}
	</script>
	<style type="text/css" media="screen, projection">
		body{height: 100%;}
		.ui-tabs-hide { display: none; }
		.ui-tabs-panel {height: 100%;}
	</style>
</head>
<body>
	<div id="container">
		<ul>
			<li><a href="#fragment-1"><span>Bài mới</span></a></li>
			<li><a href="#search"><span>Tìm kiếm</span></a></li>
			<li><a href="#playlist"><span>Playlist</span></a></li>
			<li><a href="#options"><span>Cấu hình</span></a></li>
		</ul>
		<div id="fragment-1">
		</div>
		<div id="search">
			<div style="text-align:center">
				<!--
				<select name="search_type" id="search_type">
					<option value="song" selected>Bài hát</option>
					<option value="artist">Nghệ sỹ</option>
				</select>
				-->
				<input type="text" id="txtSearch" maxlength="50" onkeypress="return entsub()" /><input type="button" value="Search" onClick="onSearchClick();" />
			</div>
			<div id="resultSearch"></div>
		</div>
		<div id="playlist">
			<div id="playListItems"></div>
		</div>
		<div id="options">
			<div id="divOption"></div>
		</div>
	</div>
</body>
</html>
